<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">入库日期：</label>
            <el-date-picker
                v-model="searchForm.dateTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 245px"
            />
        </div>
        <div class="filter-item">
            <label for="">入库类型：</label>
            <el-select
                v-model="searchForm.subType"
                class="m-2"
                style="width: 145px"
            >
                <el-option
                    v-for="item in entryList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <el-button
                size="default"
                type="primary"
                @click="search"
            >查询</el-button>
            <el-button
                size="default"
                @click="reset"
            >重置</el-button>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%"
            id="inspectionTask"
        >
            <el-table-column
                prop="productCode"
                label="入库日期"
            >
                <template #default="scope">
                    {{ moment(scope.row.operateDate).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
            </el-table-column>
            <el-table-column
                prop="subType"
                label="入库类型"
            />
            <el-table-column
                prop="quantity"
                label="入库数"
            />
            <el-table-column
                fixed="right"
                label="操作"
                width="100"
            >
                <template #default="scope">
                    <el-button
                        type="primary"
                        :icon="View"
                        size="small"
                        style="margin-bottom: 4px;"
                        @click="handleClick(scope.row)"
                    >
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            v-model:current-page="searchForm.pageNo"
            v-model:page-size="searchForm.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            class="paginationStyle"
            style="width: 100%; text-align: right;"
        />
    </div>
</template>

<script setup>
// utils
import inventoryHttp from "@/https/inventory.js";
import Storage from "@/utils/storage.js";
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import moment from 'moment';
import { View } from "@element-plus/icons-vue";
const emits = defineEmits(["detail"]);
const props = defineProps({
    productId: String
})
const entryList = ref([
    { label: "采购入库", value: "采购入库" },
    { label: "归还入库", value: "归还入库" },
]);
const outList = ref([
    { label: "领用出库", value: "领用出库" },
    { label: "退货出库", value: "退货出库" },
    { label: "报废出库", value: "报废出库" },
]);
const searchForm = ref({
    subType: '',
    productId: '',
    operationType: '入库',
    dateTime: [moment().add(-7, 'day').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
    startTime: moment().add(-7, 'day').format('YYYY-MM-DD'),
    endTime: moment().format('YYYY-MM-DD'),
    pageNo: 1,
    pageSize: 10,
})
let tableData = ref([{ productId: '1' }]);
let total = ref(0);
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
};
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
};
// 查询
const search = async () => {
    let params = {
        ...searchForm.value
    }
    params.startTime = moment(searchForm.value.dateTime[0]).format('YYYY-MM-DD')
    params.endTime = moment(searchForm.value.dateTime[1]).format('YYYY-MM-DD')
    console.log(props.productId, 'props.productCode')
    params.id = props.productId
    params.productId = props.productId
    const res = await inventoryHttp.getRecordsByOperationType(params)
    console.log(res.data.data, 'res')
    tableData.value = res.data.data.records
    total.value = res.data.data.total
}
const handleClick = (row) => {
    emits('detail', {
        operationType: 'entry',
        row: row
    })
}
onMounted(() => {
    search()
})
</script>